<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>







<div id="app">
  	
  	<input type="text" v-model="num">

	<p v-if="num>=90">{{ you }} </p>
	<p v-else-if="num<90&&num>=80">{{ liang }} </p>
	<p v-else-if="num<80&&num>=70">{{ zhong }} </p>
	<p v-else-if="num<70&&num>=60">{{ jige }} </p>
	<p v-else-if="num<60">{{ bujige }} </p>
	<p v-else=" "> {{wu}}</p>
  
</div>







<br>
<script src="vue.js"></script>

<script type="text/javascript">

var vm = new Vue({
  el: '#app',

  data: {
  	num:'',
  	you:'成绩90+，优秀',
  	liang:'成绩80-90，良',
  	zhong:'成绩70-80，中',
  	jige:'成绩60-70，及格',
  	bujige:'成绩60-，不及格',
  	wu:'23',
  },

  methods:{

  }

})





</script>

	
</body>
</html>